<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<!DOCTYPE html>
<html>
<head>
<%
	String path = request.getContextPath();
	// 获得本项目的地址(例如: http://localhost:8080/MyApp/)赋值给basePath变量 
	String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort()
			+ path + "/";
	// 将 "项目路径basePath" 放入pageContext中，待以后用EL表达式读出。 
	pageContext.setAttribute("basePath", basePath);
	//out.write(basePath);
%>

<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">

<title>教师信息添加</title>

<meta name="description"
	content="Source code generated using layoutit.com">
<meta name="author" content="LayoutIt!">

<link href="<%=basePath%>bootstrap/css/bootstrap.min.css"
	rel="stylesheet">
<link href="<%=basePath%>bootstrap/css/style.css" rel="stylesheet">



<!--派生选择器设置提示信息的字体颜色-->
<style type="text/css">
div span {
	color: red;
}
</style>
<script src="<%=basePath%>bootstrap/js/jquery.min.js"></script>
<script src="<%=basePath%>bootstrap/js/bootstrap.min.js"></script>
<script src="<%=basePath%>bootstrap/js/scripts.js"></script>
<script type="text/javascript">
	//以下进行用户修改缓存以及表单验证
	$(function() {
		//********************年龄下拉选择框赋值****************************//
		//console.info("age:" + $("#hiddenselectAge")[0].value);
		var currentAge = $("#hiddenselectAge")[0].value;
		//没有获取到年龄，或者后台没有传入年龄（新增操作）
		//$("#txtteaAge").val($("#hiddenselectAge")[0].value);
		// 设置下拉选择框的选中选项
		$("#inputteaAge").val(currentAge);
		//********************身份下拉选择框赋值****************************//
		//console.info("iden:" + $("#hiddenselectIden")[0].value);
		var currentAge = $("#hiddenselectIden")[0].value;
		//没有获取到年龄，或者后台没有传入年龄（新增操作）
		//$("#txtteaAge").val($("#hiddenselectAge")[0].value);
		// 设置下拉选择框的选中选项
		$("#inputteaideftity").val(currentAge);

		//*********************性别单选框赋值*********************//
		//获取需要绑定事件的控件
		//使用模糊匹配选择器选择 所有的单选框对象，并使用each函数遍历每个单选框对象
		$("input[name^='inputteaSex']").each(function() {
			//给每一个单选框绑定一个自定义名为myOnload的事件
			$(this).bind("myOnload", function() {
				//自定义时间的处理业务
				//获取需要绑定的性别的隐藏属性值（el表达式获取服务器传来的值）
				var val = $("#hiddensex").get(0).value;
				//如果当前正在遍历的单选框的属性值等于服务器传过来的值
				if ($(this).attr("value") == val) {
					//绑定checked属性
					$(this)[0].checked = "checked";

				} else {
					$(this).removeAttr("checked");
				}
			});
			//触发该自定义的事件（自动执行）
			$(this).trigger("myOnload");
		});
	});

	//添加用户信息-表单验证
	//1.用户名非空验证
	function checkName() {
		//获取输入的内容
		var inputteaName = document.getElementById("inputteaName").value;
		//错误提示框信息内容
		var spteaName = document.getElementById("spteaName");
		if (inputteaName == null || inputteaName == "") {
			//提示信息
			spteaName.innerHTML = "请输入用户名！";
			//改变标志量
			return false;
		} else {
			//清空提示信息
			spteaName.innerHTML = "";
			return true;
		}
	}
	//2.密码非空验证
	function checkPsw() {
		//获取输入的内容
		var inputPassword3 = document.getElementById("inputPassword3").value;
		//错误提示框信息内容
		var spteaPassword3 = document.getElementById("spteaPassword3");
		if (inputPassword3 == null || inputPassword3 == "") {
			//提示信息
			spteaPassword3.innerHTML = "请输入密码！";
			//改变标志量
			return false;
		} else {
			//清空提示信息
			spteaPassword3.innerHTML = "";
			return true;
		}
	}
	/* //3.性别非空验证
	function checkSex() {
		//获取输入的内容
		var inputteaSex = document.getElementById("inputteaSex").value;
		//错误提示框信息内容
		var spteateaSex = document.getElementById("spteateaSex");
		if (inputteaSex == null || inputteaSex == "") {
			//提示信息
			spteateaSex.innerHTML = "请输入性别！";
			//改变标志量
			return false;
		} else {
			//清空提示信息
			spteateaSex.innerHTML = "";
			return true;
		}
	}*/

	//3.性别非空验证
	function checkSex() {
		//获取输入的内容
		var inputteaSex = document.getElementsByName("inputteaSex");
		//设置标识量
		var chSex = false;
		for (var i = 0; i < inputteaSex.length; i++) {
			if (inputteaSex[i].checked) {
				chSex = true;
				break;
			}
		}
		//错误提示框信息内容
		var spteateaSex = document.getElementById("spteateaSex");
		if (!chSex) {
			//提示信息
			spteateaSex.innerHTML = "请选择性别！";
			//改变标志量
			return false;
		} else {
			//清空提示信息
			spteateaSex.innerHTML = "";
			return true;
		}
	}
	//4.年龄非空验证
	function checkAge() {
		//获取输入的内容
		var inputteaAge = document.getElementById("inputteaAge").value;
		//错误提示框信息内容
		var spteateaAge = document.getElementById("spteateaAge");
		if (inputteaAge == null || inputteaAge == "") {
			//提示信息
			spteateaAge.innerHTML = "请选择年龄！";
			//改变标志量
			return false;
		} else {
			//清空提示信息
			spteateaAge.innerHTML = "";
			return true;
		}
	}

	//5.联系方式非空验证
	function checkTel() {
		//获取输入的内容
		var inputteaTel = document.getElementById("inputteaTel").value;
		//错误提示框信息内容
		var spteateaTel = document.getElementById("spteateaTel");
		if (inputteaTel == null || inputteaTel == "") {
			//提示信息
			spteateaTel.innerHTML = "请输入联系方式！";
			//改变标志量
			return false;
		} else {
			//清空提示信息
			spteateaTel.innerHTML = "";
			return true;
		}
	}
	//6.地址非空验证
	function checkAdress() {
		//获取输入的内容
		var inputteaAdress = document.getElementById("inputteaAdress").value;
		//错误提示框信息内容
		var spteateaAdress = document.getElementById("spteateaAdress");
		if (inputteaAdress == null || inputteaAdress == "") {
			//提示信息
			spteateaAdress.innerHTML = "请输入地址！";
			//改变标志量
			return false;
		} else {
			//清空提示信息
			spteateaAdress.innerHTML = "";
			return true;
		}
	}
	//7.身份非空验证
	function checkIden() {
		//获取输入的内容
		var inputteaIden = document.getElementById("inputteaideftity").value;
		//错误提示框信息内容
		var spteateaIden = document.getElementById("spteaideftity");
		if (inputteaIden == null || inputteaIden == "") {
			//提示信息
			spteateaIden.innerHTML = "请选择身份！";
			//改变标志量
			return false;
		} else {
			//清空提示信息
			spteateaIden.innerHTML = "";
			return true;
		}
	}
	//进行最后的提交验证
	function checkAll() {
		var ischName = checkName();
		var ischPsw = checkPsw();
		var ischSex = checkSex();
		var ischAge = checkAge();
		var ischTel = checkTel();
		var ischAdre = checkAdress();
		var ischIdef = checkIden();
		if (ischName && ischPsw && ischSex && ischAge && ischTel && ischAdre
				&& ischIdef) {
			return true;
		} else {
			return false;
		}
	}
</script>
</head>
<body>

	<div id="container" align="center">
		<div style="width: 500px;" align="left">
			<h4 align="center">添加/修改教师信息</h4>
			<form class="form-horizontal" role="form"
				action="<%=basePath%>InsertTeaInfo" method="post">

				<input type="hidden" id="inputteaId" name="inputteaId"
					value="${requestScope.teaBean.teaid}">
			    <input type="hidden"id="hiddensex" 
					 value="${requestScope.teaBean.teasex}"> 
				<input	type="hidden" id="hiddenselectAge" 
					value="${requestScope.teaBean.teaage}">
				<input	type="hidden" id="hiddenselectIden" 
					value="${requestScope.teaBean.teaideftity}">

				<div class="form-group">
					<label for="inputteaName" class="col-sm-2 control-label">用户名&nbsp;</label>
					<div class="col-sm-10">
						<input type="text" class="form-control" id="inputteaName"
							name="inputteaName" value="${requestScope.teaBean.teaname}"
							placeholder=用户名 onblur="checkName();">
						<div>
							<span id="spteaName"></span>
						</div>
					</div>
				</div>

				<div class="form-group">
					<label for="inputPassword3" class="col-sm-2 control-label">密&nbsp;&nbsp;&nbsp;码&nbsp;&nbsp;</label>
					<div class="col-sm-10">
						<input type="password" class="form-control" id="inputPassword3"
							name="inputPassword3" value="${requestScope.teaBean.teapsw}"
							placeholder="密码" onblur="checkPsw();">
						<div>
							<span id="spteaPassword3"></span>
						</div>
					</div>
				</div>

				<div class="form-group">
					<label for="inputteaSex" class="col-sm-2 control-label">性&nbsp;&nbsp;&nbsp;别&nbsp;&nbsp;</label>
					<div class="col-sm-10">
						<!--  <input type="text" class="form-control" id="inputteaSex"
							name="inputteaSex" value="${requestScope.teaBean.teasex}"
							placeholder=性别 onclick="checkSex();">-->
						<label class="radio-inline"> <input type="radio"
							name="inputteaSex" id="selectSex1" value="男"
							onclick="checkSex();"> 男
						</label> <label class="radio-inline"> <input type="radio"
							name="inputteaSex" id="selectSex2" value="女"
							onclick="checkSex();"> 女
						</label>
						<!--  <label class="radio-inline"> <input type="radio"
							name="inputteaSex" id="inputteaSex1" value="男"
							<c:if test="${requestScope.teaBean.teasex=='男'}">checked</c:if>>男
						</label> <label class="radio-inline"> <input type="radio"
							name="inputteaSex" id="inputteaSex2" value="女"
							<c:if test="${requestScope.teaBean.teasex=='女'}">checked</c:if>>女
						</label>-->
						<div>
							<span id="spteateaSex"></span>
						</div>
					</div>
				</div>

				<div class="form-group">
					<label for="inputteaAge" class="col-sm-2 control-label">年&nbsp;&nbsp;&nbsp;龄&nbsp;&nbsp;</label>
					<div class="col-sm-10">
						<!--<input type="text" class="form-control" id="inputteaAge"
							name="inputteaAge" value="${requestScope.teaBean.teaage}"
							placeholder=年龄 onblur="checkAge();">-->
						<select class="form-control" id="inputteaAge" name="inputteaAge"
							onclick="checkAge();">
							<option value=""></option>
							<c:forEach begin="18" end="60" varStatus="vst">
								<option value="${vst.index}">${vst.index}</option>
							</c:forEach>
						</select>
						<div>
							<span id="spteateaAge"></span>
						</div>
					</div>
				</div>

				<div class="form-group">
					<label for="inputteaTel" class="col-sm-2 control-label">联系方式</label>
					<div class="col-sm-10">
						<input type="text" class="form-control" id="inputteaTel"
							name="inputteaTel" value="${requestScope.teaBean.teatel}"
							placeholder=联系方式 onblur="checkTel();">
						<div>
							<span id="spteateaTel"></span>
						</div>
					</div>
				</div>

				<div class="form-group">
					<label for="inputteaAdress" class="col-sm-2 control-label">地&nbsp;&nbsp;&nbsp;址&nbsp;&nbsp;</label>
					<div class="col-sm-10">
						<input type="text" class="form-control" id="inputteaAdress"
							name="inputteaAdress" value="${requestScope.teaBean.teaaddress}"
							placeholder=地址 onblur="checkAdress();">
						<div>
							<span id="spteateaAdress"></span>
						</div>
					</div>
				</div>

				<div class="form-group">
					<label for="inputteaideftity" class="col-sm-2 control-label">身份&nbsp;</label>
					<div class="col-sm-10">
						<select class="form-control" id="inputteaideftity"
							name="inputteaideftity" onclick="checkIden();">
							<option value=""></option>
							
							<option value="教师">教师</option>
						</select>
						<div>
							<span id="spteaideftity"></span>
						</div>
					</div>
				</div>

				<div class="form-group">
					<div class="col-sm-offset-2 col-sm-10">
						<button type="submit" class="btn btn-default"
							onclick="return checkAll();">提交</button>
					</div>
				</div>
			</form>
		</div>
	</div>



</body>
</html>